<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
			<title>我的订单</title>
			<link href="../../css/Kongshop.css" />
			<!-- 引入样式 -->
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
			<!-- 引入组件 -->
			<script src="../../js/vue.min.js"></script>
			<script src="../../js/vant.min.js"></script>
			<script src="html5plus://ready"></script>
			<style>
				.order{
					margin-left: 15px;
				}
				
			</style>
			<script type="text/javascript">
				document.addEventListener('plusready', function(){
					//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
					
				});
				
			</script>
		</head>
		<body>
			<div id="app">
				<van-row>
					<van-col span="24">
						<van-nav-bar
						  title="我的订单"
						  left-text="返回"
						  left-arrow
						  @click-left="onClickLeft"
						 
						/>	
					</van-col>
				</van-row>
				<div id="frist" class="order">
					<van-row>
						<van-col span="5">
							<van-row>
								<van-col span="24">
									<h4>订单编号</h4>
								</van-col>
							</van-row>
							<van-row>
								<van-col span="24">
									<h4 style="margin-top: -20px;">2019031314120000001939</h4>
								</van-col>
							</van-row>
						</van-col>
						<van-col span="5" offset="14">
							<h4 style="color: red;">未支付</h4>
						</van-col>
					</van-row>
					<van-row >
						<van-col span="24" >
							<van-card
							  num="1"
							  price="2.00"
							  desc="法国波尔多AOP级干红葡萄酒"  
							  title="世界印记狮王2016进口红酒"
							  :thumb="imageURL"
							/>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="20" offset="4">
							<h6>共一件商品,合计：￥2.00（含运费￥0.00）</h6>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="12" offset="12">
							<van-button round>支付</van-button>
							<van-button round type="danger" @click="deleteorder">删除订单</van-button>
						</van-col>
					</van-row>
				</div>
				<div id="second" class="order">
					<van-row>
						<van-col span="5">
							<van-row>
								<van-col span="24">
									<h4>订单编号</h4>
								</van-col>
							</van-row>
							<van-row>
								<van-col span="24">
									<h4 style="margin-top: -20px;">2019031314120000001938</h4>
								</van-col>
							</van-row>
						</van-col>
						<van-col span="5" offset="14">
							<h4 style="color: red;">未支付</h4>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="20" offset="4">
							<h6>共一件商品,合计：￥48.00（含运费￥0.00）</h6>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="12" offset="12">
							<van-button round>支付</van-button>
							<van-button round type="danger" @click="deleteorder1">删除订单</van-button>
						</van-col>
					</van-row>
				</div>
				<div id="third" class="order">
					<van-row>
						<van-col span="5">
							<van-row>
								<van-col span="24">
									<h4>订单编号</h4>
								</van-col>
							</van-row>
							<van-row>
								<van-col span="24">
									<h4 style="margin-top: -20px;">2019031314120000001934</h4>
								</van-col>
							</van-row>
						</van-col>
						<van-col span="5" offset="14">
							<h4 style="color: red;">未支付</h4>
						</van-col>
					</van-row>
					<van-row >
						<van-col span="24" >
							<van-card
							  num="4"
							  price="4.00"
							  desc="世界印记狮王2016进口开心果"  
							  title="法国波尔多AOP级开心果"
							  :thumb="imageURL2"
							/>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="20" offset="4">
							<h6>共一件商品,合计：￥26.00（含运费￥10.00）</h6>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="12" offset="12">
							<van-button round>支付</van-button>
							<van-button round type="danger" @click="deleteorder2">删除订单</van-button>
						</van-col>
					</van-row>
				</div>
			</div>
			<script type="text/javascript">
				var vm=new Vue({
					el:"#app",
					data:{
						imageURL:"../../img/9.jpg",
						imageURL1:"../../img/12.jpg",
						imageURL2:"../../img/10.jpg",
					},
					methods: {
					    onClickLeft() {
							 window.history.back(-1);
						},
						deleteorder:function(){
							document.getElementById("frist").remove();
						},
						deleteorder1:function(){
							document.getElementById("second").remove();
						},
						deleteorder2:function(){
							document.getElementById("third").remove();
						}
					 }
				});
			</script>
	</body>
</html>
